<template>
	<view>
		<template v-if="enableLoadMore">
			<view class="load-more__wrap">
				<template v-if="hasMore ? hasMore : false">
					<view class="load-more__loading">
						<text class="hb-icon_loading hb-iconfont_spin"></text>
						<text class="padding-left">{{loadingTip}}</text>
					</view>
				</template>
				<template v-else>
					<view class="load-more__end">
						<view class="load-more__end--tip">
							{{noMoreTip}}
						</view>
					</view>
				</template>
			</view>
		</template>
	</view>
</template>

<script>
	export default {
		name: "hbLoadMore",
		props: {
			loadMore: {
				type: Object,
				default () {
					return {
						enableLoadMore: false,
						hasMore: true,
					}
				}
			},
			loadingTip: {
				type: String,
				default: "正在加载..."
			},
			noMoreTip: {
				type: String,
				default: "没有更多内容了"
			}
		},
		data() {
			return {
				enableLoadMore: false,
				hasMore: true,
			}
		},
		watch: {
			loadMore: {
				deep: true,
				handler(newVal, oldVal) {
					this.enableLoadMore = newVal.enableLoadMore;
					this.hasMore = newVal.hasMore;
					console.log(newVal)
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	.load-more {
		&__wrap {
			text-align: center;
			flex-shrink: 0;
			width: 100%;
		}

		&__loading {
			font-size: 28rpx;
			height: 160rpx;
			text-align: center;

			.loading {
				width: 64rpx;
				height: 64rpx;
				margin-top: 32rpx;
				margin-bottom: 32rpx;
				display: inline-block
			}
		}


		&__end {
			padding: 30rpx 0;

			&--tip {
				width: auto;
				height: 34rpx;
				font-size: 28rpx;
				line-height: 34rpx;
				margin-right: 14rpx;
				margin-left: 14rpx;
				display: inline-block;
				color: #888;
				flex-shrink: 0
			}

			&--tip:before,
			&--tip:after {
				content: "";
				width: 160rpx;
				height: 1px;
				flex-grow: 1;
				margin-right: 32rpx;
				margin-left: 32rpx;
				background: #e5e5e5;
				display: inline-block;
				vertical-align: middle
			}
		}
	}
</style>
